import React,{useState} from 'react'
import { Col, message, Row } from 'antd';
import logo from "../assets/images/logo.png"
import styles from "../assets/styles/login.module.less"
import { Button, Checkbox, Form, Input, Select } from 'antd';
import {useNavigate,Link} from "react-router-dom"
import {loginApi} from "@/apis/user"


export default function Login() {
  let [count,setCount] = useState(0)
  const [user,setUser] = useState({id:1,classes:"32"})
  const navigate = useNavigate()
  
  // 点击提交按钮，验证通过，执行onFinish
  const onFinish =async (values) => {
    console.log(values);
    const res = await loginApi(values)
    console.log(res);
    if(res.data.code){
      message.success("登录成功")
      const {token,userInfo} = res.data.data
      localStorage.setItem("token",token)
      localStorage.setItem("userInfo",JSON.stringify(userInfo))
      navigate("/home/")
    }else{
      message.error("登录失败")
    }
  };
  // 点击提交按钮，验证失败，执行onFinishFailed
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const handleChange = (value)=>{
    console.log(value);
  }


  return (
    <div className={styles.main}>
      {/* 登录面板 */}
      <div className={styles.panel}>
        <div className={styles.logo}>
          <img width={"200px"} src={logo} alt="" />
        </div>
        <div>
          <Form
            name="basic"
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              maxWidth: 600,
            }}
            initialValues={{
              remember: false,
            }}
            onFinish={onFinish} //成功的结果
            onFinishFailed={onFinishFailed} //验证失败结果
          >
            <Form.Item
              label="用户名"
              name="account"
              rules={[
                {
                  required: true,
                  message: '请输入用户名',
                }
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: 'Please input your password!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
          <Link to="/register">没有注册？去注册</Link>
        </div>
      </div>
    </div>
  )
}
